<template>
  <DetailContainer class="app-container">
    <div slot="top">
      <div class="form-detail card whiteBox">
        <div class="cardHeader noborder" style="padding: 10px; font-size: 16px">
          <el-button icon="el-icon-arrow-left" size="mini" circle @click="$router.back()"></el-button>
          {{ $t("order.orderDetail") }}
          <!-- 应收应付仅义特 -->
          <div v-if="YT_roles" style="float: right">
            <el-button type="primary" size="small" @click="payVisible = true">{{
              $t("order.payApply")
            }}</el-button>
            <el-button type="primary" size="small" @click="receiveVisible = true" style="margin-right: 10px">{{
              $t("order.receiveApply") }}</el-button>
          </div>
          <!-- ------------- -->
          <div style="float: right; margin-right: 10px">
            <el-button v-if="status === 0" type="primary" size="small" @click="makeSureOrder">{{ $t("order.submitOrder")
            }}</el-button>
          </div>
          <div style="float: right">
            <el-button v-if="status === 1" type="primary" size="small" @click="addInShow">{{ $t("order.addInst")
            }}</el-button>
            <el-button v-if="status === 2" type="primary" size="small" @click="changeStatus(3)">{{ $t("order.outbound")
            }}</el-button>
            <el-button v-if="status === 3" type="primary" size="small" @click="changeStatus(4)">{{ $t("order.saveGoods")
            }}</el-button>
            <el-button type="primary" size="small" @click="editForm" style="margin-right: 10px">{{ $t("common.edit")
            }}</el-button> 
            <el-button type="primary" size="small" @click="beforeoverseaSubmit" style="margin-right: 10px">{{ $t("order.overseaSubmit")
            }}</el-button>
          </div>
        </div>
        <div style="padding: 0 10px">
          <el-form ref="ruleForm" :model="allData" label-position="left" label-suffix=":">
            <el-row :gutter="20">
              <el-col v-for="(item, index) in topColumn" :key="index" :xs="24" :sm="item.col" :md="item.col"
                :lg="item.col" :xl="item.col">
                <FormComponents :item-obj="item" :form="allData" :isedit="false" />
              </el-col>
            </el-row>
          </el-form>
        </div>
        <StepsNew :label="statusList" class="status-steps" :status="status" :postMethod="'put'" :disable="true"
          :nodeUrl="'/wms/omsOrderShop'" @refresh="getDetailData"
          style="border-top: 1px solid #dcdfe6; padding: 10px 10px" />
      </div>
    </div>
    <div slot="info" style="margin-top: 10px">
      <InfoContainer>
        <template slot="info-left">
          <LeftInfo :ruleFrom="allData" :id="allData.id" />
        </template>
        <template slot="info-right">
          <!-- <RightInfo /> -->
        </template>
      </InfoContainer>
    </div>
    <div slot="bottom" style="margin-top: 10px">
      <DetailTabList ref="DetailBody" :ruleFrom="allData" @refresh="getDetailData" />
      <EditInfo ref="EditInfoRef" @success="getDetailData" />
      <!-- 添加出库指令 -->
      <el-dialog :title="$t('order.addInst')" :visible.sync="addInstructions" class="el-dialog-normal">
        <el-select v-model="InstructionsValue" :placeholder="$t('common.placeholderSelect')">
          <el-option v-for="item in InstructionOptions" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
        <div class="foot-fixed-total" style="margin: 12px">
          <el-button @click="addInstructions = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="changeStatus(2)">{{
            $t("common.confirm")
          }}</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog :title="$t('common.edit')" :visible.sync="editVisible" class="el-dialog-normal">
        <el-form ref="ruleForm" :model="allData" label-position="left" label-suffix=":" label-width="100px">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in editcolumn" :key="index" :xs="24" :sm="item.col" :md="item.col" :lg="item.col"
              :xl="item.col">
              <FormComponents :item-obj="item" :form="allData" :isedit="true">
                <template slot="warehouseId">
                  {{ allData.warehouseName }}<span v-if="allData.areaName">{{ '/' }}</span>{{ allData.areaName }}
                </template>
              </FormComponents>
            </el-col>
          </el-row>
        </el-form>
        <div class="foot-fixed-total" style="margin: 12px">
          <el-button @click="editVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="editSubmit">{{
            $t("common.confirm")
          }}</el-button>
        </div>
      </el-dialog>
      <!-- 海外收款确认 -->
      <el-dialog :title="$t('common.overSeaVisible')" :visible.sync="overSeaVisible" class="el-dialog-normal">
        <el-form ref="overSeaRuleForm" :model="overSeaRuleForm" label-position="left" label-suffix=":" label-width="100px">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in overSeaColumns" :key="index" :xs="24" :sm="item.col" :md="item.col" :lg="item.col"
              :xl="item.col">
              <FormComponents :item-obj="item" :form="overSeaRuleForm" :isedit="true">
                <template slot="fileList">
                  <UploadList v-model="overSeaRuleForm.files" />
                </template>
              </FormComponents>
            </el-col>
          </el-row>
        </el-form>
        <div class="foot-fixed-total" style="margin: 12px">
          <el-button @click="overSeaVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="overSeaSubmit">{{
            $t("common.confirm")
          }}</el-button>
        </div>
      </el-dialog>
      <!-- 新增付款 -->
      <el-dialog :title="$t('order.payApply')" :visible.sync="payVisible" class="el-dialog-normal">
        <PayOrReceiveInfo :order-id="$route.query.id" :customer-id="allData.tenantId" type="PAY" :is-edit="true" @cancel="payVisible = false" />
      </el-dialog>
      <!-- 新增收款 -->
      <el-dialog :title="$t('order.receiveApply')" :visible.sync="receiveVisible" class="el-dialog-normal">
        <PayOrReceiveInfo :order-id="$route.query.id" type="RECEIVE" :is-edit="true" @cancel="receiveVisible = false" />
      </el-dialog>
    </div>
  </DetailContainer>
</template>
<script>
import dayjs from "dayjs";
import StepsNew from "@/components/StepsNew/index.vue";
import NavCom from "@/components/Nav/detail.vue";
import FormComponents from "@/components/FormComponents/index.vue";
import DetailTabList from "./detailTabList.vue";
import DetailContainer from "@/components/Common/detail-container/detail-container.vue";
import InfoContainer from "@/components/Common/detail-container/info-container.vue";
import RightInfo from "./rightInfo.vue";
import LeftInfo from "./leftInfo.vue";
import { getDetailData, getInstruct, changeStatus } from "@/api/order/index.js";
// import Mix from '@/views/oms/list/mix.js'
import EditInfo from "./editInfo.vue";
import PayOrReceiveInfo from "./payOrReceive.vue";
import UploadList from '@/components/FileUpload/index.vue'

export default {
  components: {
    StepsNew,
    NavCom,
    FormComponents,
    InfoContainer,
    RightInfo,
    DetailContainer,
    DetailTabList,
    LeftInfo,
    EditInfo,
    PayOrReceiveInfo,
    UploadList
  },
  // mixins: [Mix],this.$t('order.statusList.first')
  data() {
    let ids = this.$route.query.id;
    return {
      statusList: [
        {
          value: 0,
          label: this.$t("order.statusList.first"),
          status: 0,
          data: { status: 0, id: ids },
        },
        {
          value: 1,
          label: this.$t("order.statusList.second"),
          status: 1,
          data: { status: 1, id: ids },
        },
        {
          value: 2,
          label: this.$t("order.statusList.third"),
          status: 2,
          data: { status: 2, id: ids },
        },
        {
          value: 3,
          label: this.$t("order.statusList.forth"),
          status: 3,
          data: { status: 3, id: ids },
        },
        {
          value: 4,
          label: this.$t("order.statusList.fifth"),
          status: 4,
          data: { status: 4, id: ids },
        },
      ],
      topColumn: [
        {
          prop: "orderSn",
          label: this.$t("order.orderSn"),
          type: "input",
          col: 6,
        },
        {
          prop: "orderNo",
          label: this.$t("order.YTNo"),
          type: "input",
          col: 6,
        },
        {
          prop: "totalAmount",
          label: this.$t("order.money"),
          type: "input",
          col: 6,
        },
        { prop: "asn", label: this.$t("order.asn"), type: "input", col: 6 },
        {
          prop: "outBoundType",
          label: this.$t("order.OutboundMethod"),
          type: "input",
          col: 6,
        },
        
        {
          prop: "receiverName",
          label: this.$t("order.consignee"),
          type: "input",
          col: 6,
        },
        {
          prop: "receiverPhone",
          label: this.$t("order.consigneePhone"),
          type: "input",
          col: 6,
        },
        {
          prop: "receiverDetailAddress",
          label: this.$t("order.consigneeAddress"),
          type: "input",
          col: 6,
        },
        { slot: "warehouseId", label: '仓库/库位', col: 6 },
        {
          prop: "rackName",
          label: this.$t("common.container"),
          type: "input",
          col: 6,
        },
        { prop: "overseasAmount", label: this.$t('common.overseaAmount'), type: "input", col: 6 },
        {
          prop: "planOutTime",
          label: this.$t("order.expectedDeliveryTime"),
          type: "input",
          col: 6,
        },
        {
          prop: "createTime",
          label: this.$t("order.orderTime"),
          type: "input",
          col: 6,
        },
      ],
      editcolumn: [
        {
          prop: "totalAmount",
          label: this.$t("order.money"),
          type: "input",
          col: 24,
        },
        { prop: "asn", label: this.$t("order.asn"), type: "input", col: 24 },
        {
          prop: "outBoundType",
          label: this.$t("order.deliveryMethod"),
          type: "select",
          col: 24,
          selectOptions: [
            { value: "FBN", label: "FBN" },
            { value: "FBA", label: "FBA" },
            { value: "私人派送", label: "私人派送" },
            { value: "转送flex", label: "转送flex" },
          ],
        },
        {
          prop: "receiverName",
          label: this.$t("order.consignee"),
          type: "input",
          col: 24,
        },
        {
          prop: "receiverPhone",
          label: this.$t("order.consigneePhone"),
          type: "input",
          col: 24,
        },
        {
          prop: "receiverDetailAddress",
          label: this.$t("order.consigneeAddress"),
          type: "input",
          col: 24,
        },
      ],
      list: null,
      total: null,
      tableLoading: false,
      status: 0,
      allData: {},
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      tableIds: null,
      DispatchTypeEnum: [
        { value: "LOGISTICS", label: this.$t("order.delivery") },
        { value: "DELIVERY", label: this.$t("order.logistics") },
      ],
      addInstructions: false,
      InstructionOptions: [],
      InstructionsValue: [],
      uploadLoading: false,
      // 编辑
      editVisible: false,
      // 收款付款
      payVisible: false,
      receiveVisible: false,
      // 海外收款确认
      overSeaVisible: false,
      overSeaRuleForm: {},
      overSeaColumns: [
        {
          prop: "overseasAmount",
          label: this.$t("order.amountCollected"),
          type: "input",
          col: 24,
        },
        {
          prop: "fileList",
          slot: "fileList",
          label: this.$t("order.receiptVoucher"),
          type: "fileList",
          col: 24,
        },
      ]
    };
  },
  computed: {
    YT_roles() {
      // 暂时判断roles为common不是客户的未YT
      if(this.$store.state.user.roles[0] !== 'common') {
        return true
      }
    }
  },
  created() {
    this.getDetailData();
  },
  methods: {
    filterNum(val, ary) {
      var l = ary.filter((f) => f.value === val);
      return l.length > 0 ? l[0].name : "--";
    },
    addShipmentBatch() {
      let query = { id: this.$route.query.id };
      this.$router.push({
        name: "addShipmentBatch",
        query,
      });
    },
    getDetailData() {
      const id = this.$route.query.id;
      this.tableLoading = true;
      getDetailData(id)
        .then((res) => {
          const data = res;
          this.status = data.status;
          data.createTime = dayjs(data.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.allData = data;
          this.tableIds = [data];
        })
        .finally(() => {
          this.tableLoading = false;
        });
      this.$nextTick(() => {
        // this.$refs.DetailBody.getList();
      });
    },
    addInShow() {
      this.addInstructions = true;
      this.getInstruction(this.$route.query.id);
    },
    getInstruction(id) {
      let params = {};
      id ? (params.orderId = id) : (params = {});
      getInstruct({ ...params }).then((res) => {
        if (res.content) {
          this.InstructionOptions = res.content;
        }
      });
    },
    handleQuery() {
      this.getDetailData();
    },
    changeStatus(num) {
      const params = {
        id: this.allData.id,
        status: num,
      };
      if (num === 2) {
        params.instructList = [
          {
            title: this.InstructionsValue.title,
            amount: this.InstructionsValue.amount,
            type: this.InstructionsValue.type,
          },
        ];
      }
      changeStatus({ ...params })
        .then((res) => {
          this.$message.success(this.$t("common.succcessInfo"));
          this.addInstructions = false;
          this.getDetailData();
        })
        .catch((e) => { });
    },
    // 确认订单，完成后改变状态
    makeSureOrder() {
      this.$refs.EditInfoRef.setData(this.allData);
    },
    // 海外收款确认
    beforeoverseaSubmit() {
      this.overSeaVisible = true
      // this.$alert(this.$t('order.overseaSubmit'), '', {
      //   confirmButtonText: this.$t('common.submit'),
      //   callback: action => {
      //     const params = { payStatus: 'NORMAL', id: this.allData.id }
      //     changeStatus({...params}).then(res=>{
      //       if(res) {
      //         this.$message({
      //           type: 'success',
      //           message: this.$t('common.succcessInfo')
      //         });
      //       }
      //     })
      //   }
      // });
    },
    overSeaSubmit() {
      const files =  JSON.stringify(this.overSeaRuleForm.files)
      const params = { payStatus: 'NORMAL', id: this.allData.id, ...this.overSeaRuleForm, files: files }
      // console.log('params', params)
      // return
      changeStatus({...params}).then(res=>{
        if(res) {
          this.$message({
            type: 'success',
            message: this.$t('common.succcessInfo')
          });
        }
      })
      this.overSeaVisible = false
    },
    editForm() {
      this.editVisible = true;
    },
    editSubmit() {
      const params = {
        id: this.allData.id,
        status: this.allData.status,
        asn: this.allData.asn,
        totalAmount: this.allData.totalAmount,
        outBoundType: this.allData.outBoundType,
        receiverName: this.allData.receiverName,
        receiverPhone: this.allData.receiverPhone,
        receiverDetailAddress: this.allData.receiverDetailAddress,
      };
      changeStatus(params).then(() => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.editVisible = false;
        this.getDetailData();
      });
    },
  },
};
</script>
